<template>
  <div class="container">
    <el-form :model="classgradeData" label-width="160px" class="createForm">
        <el-form-item :label="table.headPortrait" prop="headPortrait">
          <el-input v-model="classgradeData.headPortrait" />
        </el-form-item>
        <el-form-item :label="table.name" prop="name">
          <el-input v-model="classgradeData.name" />
        </el-form-item>
        <el-form-item :label="table.introduction " prop="introduction">
          <el-input v-model="classgradeData.introduction" />
        </el-form-item>
        <el-form-item :label="table.teachers " prop="teachers">
          <el-select
            v-model="classgradeData.teachers"
            multiple
            placeholder="Select"
            style="width: 240px"
          >
            <el-option
              v-for="item in options.teachers"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div class="d">
          <el-button type="primary" @click="cancel">取消</el-button>
          <el-button type="primary" @click="createClass">确认</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
export default {
    setup() {
        const dataMap = reactive({
            classgradeData: {
                headPortrait: "",
                name: "",
                introduction: "",
                teachers: []
            },
            options: {
              teachers: [{}]
            },
            table: {
                headPortrait: "头像：",
                name: "班级名称：", 
                introduction: "班级介绍：",
                teachers: "请选择至少一位老师："
            }
        })
        return {
            ...toRefs(dataMap)
        }
    },
    methods: {
      getClassgradeData() {  
      },
      getOptionsTeachers(){
        var _this = this
        this.$axios
              .get('administractor/teachers')
              .then( response => {
                  let stateCode = response.headers["state"]
                  if(stateCode=="200"){
                    this.options.teachers = response.data
                  }
                  else if(stateCode==null){
                      // this.$message.success("请求数据异常！")
                  }
                  else{
                      this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                  }

              })
              .catch(function (error){
                  let stateCode = error.response.headers["state"]                            
                  if(stateCode!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                  }
                  else{
                      _this.$message.error("后端异常")
                  }
              })
              .then(function (){
                  console.log("测试成功")
              })  
      },
      createClass() {
        let formData = new FormData()
        formData.append("headPortrait",this.classgradeData.headPortrait)
        formData.append("name",this.classgradeData.name)
        formData.append("introduction",this.classgradeData.introduction)
        formData.append("teachersId",this.classgradeData.teachers)
        this.$axios
              .post('administractor/classgrade/create',formData)
              .then(response=> {
                  console.log(response)
                  this.$router.push({
                    path: '/administractor/classmanagement',
                    name:  "ClassManagement"
                  })
                  this.$message.success("创建班级成功！")
              })
              .catch(function (error){
                  console.log(error)
              })
              .then(function (){
                  console.log("测试成功")
              })  

      },
      cancel() {
          this.$router.push('/administractor/classmanagement')        
      }
    },
    mounted() {
      this.getOptionsTeachers()
    }
}
</script>

<style scoped>

.container {
  height: 100%;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

.createForm{
  height: 400px;
  width: 500px;
  box-sizing: border-box;
}

.d {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 50px;
}

</style>